{% extends 'cms/base.html' %}
{% load rest_framework %}
{% block title %}
    课程老师
{% endblock %}

{% block head %}
    <script src="https://unpkg.com/qiniu-js@2.4.0/dist/qiniu.min.js"></script>
    <script src="{% static 'js/template-web.js' %}"></script>
    <script src="{% static 'js/template.js' %}"></script>
    <script src="{% static 'js/course_teacher.js' %}"></script>
{% endblock %}

{% block content-header %}
    <h1>课程老师</h1>
{% endblock %}

{% block content %}

<div class="row">
    <div class="col-md-12">
        <div class="box box-primary">
            <div class="box-header">
{#                django-restframework自带的HTML接口API#}
{#                <a href="{% url "cms:course_teacher_list" %}"><button id="add-btn" class="btn btn-primary pull-right" >添加教师</button></a>#}
                <button id="teacher-button" type="button" class="btn btn-primary pull-right" data-toggle="modal" data-target="#exampleModal">添加教师信息</button>

                <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
                  <div class="modal-dialog" role="document">
                    <div class="modal-content">
                      <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                           <h4 class="modal-title" id="exampleModalLabel">添加老师信息</h4>
                      </div>
                      <div class="modal-body">
                        <form id="course-teacher-data" action="" method="">
                          <div class="form-group">
                              <label for="recipient-name" class="control-label">姓名:</label>
                            <textarea type="text" class="form-control" name="teacher-name"></textarea>
                          </div><div class="form-group">
                            <label for="recipient-name" class="control-label">职称:</label>
                            <textarea type="text" class="form-control" name="teacher-job-title"></textarea>
                          </div><div class="form-group">
                            <label for="recipient-name" class="control-label">简介:</label>
                            <textarea class="form-control" name="teacher-profile"></textarea>
                          </div>
                          <div class="form-group">
                            <label for="form-group" class="control-label">头像:</label>
                              <div class="input-group">
                                  <textarea type="text" name="teacher-avatar" class="form-control" id="thumbnail-form"></textarea>
                                  <span class="input-group-btn">
                                      <label class="btn btn-default btn-file">
                                          上传图片 <input hidden="" type="file" class="btn btn-default" id="upload-btn">
                                      </label>
                                  </span>
                              </div>

                          </div>
                            <div class="form-group" id="progress-group" style="display: none;">
                                            <div class="progress">
                                                <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar"
                                                     aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
                                                    0%
                                                </div>
                                            </div>
                                        </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button id="submit-btn-teacher" type="button" class="btn btn-primary">提交</button>
                            </div>
                        </form>
                      </div>
                    </div>
                  </div>
                </div>

            </div>
            <div class="box-body">
                <table class="table table-bordered">
                    <thead>
                        <tr>
                            <th>id</th>
                            <th>姓名</th>
                            <th>职称</th>
                            <th>简介</th>
                            <th>操作</th>
                            <th>头像</th>
                        </tr>
                    </thead>
                    <tbody id="course-teacher-list">
                    <script id="course-teacher-list-tmpl" type="text/html">
{#                    Django模板标签，将包裹部分不识别，当作字符串处理#}
                    {% verbatim %}
                    {{ each course_teachers as teacher }}
                        <tr  data-pk="{{ teacher.id }}" data-name="{{ teacher.username }}" data-jobtitle="{{ teacher.jobtitle }}" data-profile="{{ teacher.profile }}" data-avatar="{{ teacher.avatar }}">
                            <td>{{ teacher.id }}</td>
                            <td>{{ teacher.username }}</td>
                            <td>{{ teacher.jobtitle }}</td>
                            <td>{{ teacher.profile }}</td>
                            <td><img src="{{ teacher.avatar}}" alt="" style="height: 40px"></td>
                            <td>

                                    <button id="edit-btn" type="button" class="btn btn-warning btn-xs edit-btn">编辑</button>


                                <button class="btn btn-danger btn-xs delete-btn">删除</button>
                            </td>
                        </tr>
                    {{ /each }}
                    {% endverbatim %}
                    </script>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

{% endblock %}